<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字体</title>
    <link rel="stylesheet" href="css/fonts.css" />
    <style>
      /* 自定义字体,注意:实战开发中都是写在外部css文件中 */
      /* @font-face {
        font-family: '哥特';
        src: url(fonts/哥特式字体.ttf);
      } */

      p {
        /*
          color 字体颜色
          注意: 此属性不属于font系列(font-xxx)

          取值方式:
          1.英文单词  red,blue,green... 局限性较大

          2.(推荐)颜色的十六进制编码 #000000(黑) ~ #FFFFFF(白)
            注意: 其中每两位是一种颜色,如果两位是相同的,则可以省略只写一位

          3.rgb三原色坐标 rgb(0,51,187),每一位都是0~255
             rgb(0,0,0) ~ rgb(255,255,255)

          补充: 2和3还可以在第四位置上添加透明度选项
          #000000FF           最后两位是透明度,范围是00~FF,00完全透明,FF不透明
          rgba(0,0,0,0.2)     第四位是透明度,范围0~1,0完全透明,1不透明

        */
        color: #0033bb;
        /* color: rgb(0, 51, 187); */
        /* color: #000000ff; */
        /* color: rgba(0, 0, 0, 0.2); */

        /* font系列 */
        /*
          字体的类型
            注意:
            1.可以同时指定多个类型,使用逗号隔开,在显示时会从左到右依次匹配,以第一个成功匹配的字体为准,
              如果都没有匹配到,则使用默认字体
            2.字体推荐使用''修饰,特别是由多个单词中间有空格的字体,必须使用''

            CSS3提供了自定义字体类型的方式
            1.下载需要的字体文件,放入到项目的fonts文件夹中
            2.定义自定义字体的@font-face,两个参数,字体名字以及字体文件的路径
            3.在font-family中使用自定义字体的名字
        */
        /* font-family: '哥特', '隶书', 'Times New Roman', 'Times', 'serif'; */

        /*
          字体大小
          注意:
          在PC端一般使用px像素作为单位(相对单位)
          在移动端使用rem作为单位(相对单位)
        */
        /* font-size: 35px; */

        /*
          字体粗细
          常用选项: bolder(粗体),normal(正常)
        */
        /* font-weight: bolder; */

        /* 字体风格, italic斜体 */
        /* font-style: italic; */

        /*
          font复合属性
          可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
        */
        font: italic bolder 35px/1.5 '隶书', 'Times New Roman', 'Times', 'serif';
      }

      h1 {
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <p>这是一段文字</p>

    <h1>标题文字</h1>
  </body>
</html>
